<template>
  <view>
    <uv-calendar
      ref="calendar"
      mode="range"
      showLunar
      color="#f56c6c"
      :selected="selected"
    ></uv-calendar>
    <button @click="open">打开</button>
  </view>
</template>
<script>
export default {
  data() {
    const d = new Date();
    const year = d.getFullYear();
    let month = d.getMonth() + 1;
    month = month < 10 ? `0${month}` : month;
    const date = d.getDate();
    return {
      show: false,
      index: 0,
      values: ["", "", "", "", "", "", "", ""],
      startDate: `${year}-${month}-02`,
      endDate: `${year}-${month}-20`,
      selected: [
        {
          date: `${year}-${month}-02`,
          info: "签到",
          badge: true,
          infoColor: "#ff0000",
        },
        {
          date: `${year}-${month}-06`,
          info: "余10",
          infoColor: "#19be6b",
          topinfo: "￥100",
          topinfoColor: "#19be6b",
        },
      ],
      defaultDate: `${year}-${month}-15`,
      date5: [`${year}-${month}-08`, `${year}-${month}-20`],
    };
  },
  onReady() {
    this.$refs.calendar.setFormatter(this.formatter);
  },
  methods: {
    open() {
      this.$refs.calendar.open();
    },
    confirm(e) {
      console.log("日历选择：", e);
    },
    formatter(day) {
      const d = new Date();
      let month = d.getMonth() + 1;
      const date = d.getDate();
      if (day.month == month && day.day == date + 3) {
        day.bottomInfo = "打8折";
        day.dot = true;
        day.disabled = true;
        console.log(day);
      }
      return day;
    },
  },
};
</script>
